<template>
	<div class="node-wrap">
		<div class="node-wrap-box" @click="show">
			<!--  <div class="title" style="background: #3296fa;">
        <el-icon class="icon"><el-icon-promotion /></el-icon>
        <span>{{ nodeConfig.name }}</span>
        <el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>
      </div>
      <div class="content">
        <em class="item-index">{{nodeConfig.id}}</em>
        <span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
        <span v-else class="placeholder">请选择要执行的应用以及操作</span>
      </div> -->




			<div class="content" style="color: rgb(130, 140, 165);">

				<em class="item-index">{{nodeConfig.index}}</em>

				<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>

				<div v-if="false" class="flex" style="padding: 5px;padding-right: 25px;">
					<div class="flex ai-center jc-center">
						<div class="item-icon">
							<img src="https://fe-1304214004.file.myqcloud.com/images/ssp/20221215/g8tjb9yt.png">
						</div>
					</div>
					<div>
						<div class="high-light">微信公众号v3.0-收发消息</div>
						<div><span class="high-light">触发: </span>接收文本消息</div>
					</div>
				</div>

				<div v-else class="flex" style="padding: 5px;padding-right: 25px;">
					<div class="flex ai-center jc-center">
						<div class="item-icon">
							<img
								src="https://fe-1304214004.cos.ap-beijing.myqcloud.com/images/ssp/1d588df5-97bd-4a63-9a5b-8ac4d10c13a2.png">
						</div>
					</div>
					<!-- <div class="flex ai-center jc-center">
            <div><span class="high-light">执行条件: </span> 设定触发后续流程的执行条件 </div>
          </div> -->

					<div>
						<div class="high-light">执行延迟</div>
						<div><span class="high-light">延迟: </span>1小时</div>
					</div>
				</div>
			</div>
		</div>
		<add-node v-model="nodeConfig.childNode"></add-node>
		<el-drawer title="延迟执行" v-model="drawer" destroy-on-close append-to-body :size="600">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label>
						延迟执行
					</label>
				</div>
			</template>
			<el-container>
				<el-main style="padding:0 20px 20px 20px">
					<div style="padding-left: 18px; padding-bottom: 18px;">
						<template v-for="(item,index) in form.inputs.conditionList" :key="index">
							<el-form label-position="top">
								<el-divider v-if="form.inputs.conditionList.length>1 && index > 0">或</el-divider>
								<el-form-item>
									<el-table :data="item">
										<el-table-column prop="label" label="描述">
											<template #default="scope">
												<el-input v-model="scope.row.label" placeholder="描述"></el-input>
											</template>
										</el-table-column>
										<el-table-column prop="field" label="条件字段" width="130">
											<template #default="scope">
												<el-input v-model="scope.row.field" placeholder="条件字段"></el-input>
											</template>
										</el-table-column>
										<el-table-column prop="operator" label="运算符" width="130">
											<template #default="scope">
												<el-select v-model="scope.row.operator" placeholder="Select">
													<el-option label="等于" value="="></el-option>
													<el-option label="不等于" value="!="></el-option>
													<el-option label="大于" value=">"></el-option>
													<el-option label="大于等于" value=">="></el-option>
													<el-option label="小于" value="<"></el-option>
													<el-option label="小于等于" value="<="></el-option>
													<el-option label="包含" value="include"></el-option>
													<el-option label="不包含" value="notinclude"></el-option>
												</el-select>
											</template>
										</el-table-column>
										<el-table-column prop="value" label="值" width="100">
											<template #default="scope">
												<el-input v-model="scope.row.value" placeholder="值"></el-input>
											</template>
										</el-table-column>
										<el-table-column prop="value" label="移除" width="55">
											<template #default="scope">
												<el-link type="danger" :underline="false"
													@click="deleteConditionListItem(item,scope.$index)">移除</el-link>
											</template>
										</el-table-column>
									</el-table>
								</el-form-item>
								<p class="del-box" style="display: flex;">
									<el-button type="primary" text icon="el-icon-plus" round
										@click="addConditionListAnd(item)">新增且</el-button>
									<span style="flex: 1; display: block;">&nbsp;</span>
									<el-icon class="del"
										@click="deleteConditionList(index)"><el-icon-delete /></el-icon>
								</p>
							</el-form>
						</template>
					</div>
					<p><el-button type="primary" text icon="el-icon-plus" round
							@click="addConditionListOr">新增或</el-button></p>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer=false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
	import addNode from './addNode'

	export default {
		inject: ['select'],
		props: {
			modelValue: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			addNode
		},
		data() {
			return {
				nodeConfig: {},
				drawer: false,
				isEditTitle: false,
				form: {}
			}
		},
		watch: {
			modelValue() {
				this.nodeConfig = this.modelValue
			}
		},
		mounted() {
			this.nodeConfig = this.modelValue
		},
		methods: {
			safeStringify(obj, indent = 2) {
				let cache = [];
				const retVal = JSON.stringify(
					obj,
					(key, value) =>
					typeof value === "object" && value !== null ?
					cache.includes(value) ?
					undefined // 如果在对象中找到循环引用就返回undefined，以避免错误
					:
					cache.push(value) && value // 否则将值添加到缓存中
					:
					value,
					indent
				);
				cache = null; // 释放缓存
				return retVal;
			},
			show() {
				this.form = {}
				this.form = JSON.parse(this.safeStringify(this.nodeConfig))
				this.drawer = true
			},
			editTitle() {
				this.isEditTitle = true
				this.$nextTick(() => {
					this.$refs.nodeTitle.focus()
				})
			},
			saveTitle() {
				this.isEditTitle = false
			},
			save() {
				this.$emit("update:modelValue", this.form)
				this.drawer = false
			},
			delNode() {
				this.$emit("update:modelValue", this.nodeConfig.childNode)
			},
			selectHandle(type, data) {
				this.select(type, data)
			},
			addConditionListAnd(item) {
				item.push({
					label: '',
					field: '',
					operator: '=',
					value: ''
				})
			},
			addConditionListOr() {
				this.form.inputs.conditionList.push([{
					label: '',
					field: '',
					operator: '=',
					value: ''
				}])
			},
			deleteConditionListItem(item, index) {
				item.splice(index, 1)
			},
			deleteConditionList(index) {
				this.form.inputs.conditionList.splice(index, 1)
			},
			toText(nodeConfig) {
				if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length > 0) {
					const users = nodeConfig.nodeUserList.map(item => item.name).join("、")
					return users
				} else {
					if (nodeConfig.userSelectFlag) {
						return "发起人自选"
					} else {
						return false
					}

				}
			}
		}
	}
</script>

<style scoped>
	.del-box .del {
		background: none;
	}

	.del-box .del:hover {
		background: #F56C6C;
	}

	.del-box .del {
		background: #fff;
		color: #999;
		width: 32px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		border-radius: 50%;
		font-size: 12px;
		cursor: pointer;
	}

	.del-box .del:hover {
		background: #F56C6C;
		color: #fff;
	}
</style>
